<template>
	<view>
		<view class="bg-white search-display-area">
			<view class="row search">
				<u-icon class="mr20 ml20" color="#c8c9cc" name="search"  size="38"></u-icon>
				<u-input v-model="keyword" :placeholder="'请输入优惠卷核销码'" :border="false" />
				<u-button :custom-style="customStyle" @click="coupon_code = keyword;cancelAfterVerificationFun()">核销</u-button>
			</view>
		</view>
		<view class="center">
			<view class="scan-display-area" @click="wxScan()">
				<u-icon name="scan"  size="60"></u-icon>
				<view class="">
					扫码
				</view>
			</view>
			<view class="record text-center mt20" @click="goPage('/pages/bundle/cancel_after_verification_record/cancel_after_verification_record')">
				核销记录
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import wechath5 from '@/utils/wechath5'
	import { cancelAfterVerification } from "@/api/user";
	export default {
		data() {
			return {
				keyword:'',
				coupon_code:'',
				customStyle: {
					background:'rgb(32, 230, 223)',
					borderRadius:'50px',
					padding:'0 30rpx',
					height:'30px',
					lineHeight:'30px',
					color: '#ffffff'
				}
			}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			wxScan(){
				var _this = this;
				wechath5.wxScan(function(res){
					_this.coupon_code = res.resultStr
					_this.cancelAfterVerificationFun()
				})
			},
			
			cancelAfterVerificationFun(){
				var _this = this;
				if(_this.coupon_code.length <= 0){
					_this.$refs.uTips.show({
						title: '核销码不能为空',
						type: 'error',
						duration: '2300'
					})
				}
				cancelAfterVerification({
					coupon_code:_this.coupon_code
				}).then(res =>{
					if(res.code == 1){
						_this.$refs.uTips.show({
							title: '优惠卷核销成功',
							type: 'success',
							duration: '2300'
						})
					}else{
						_this.$refs.uTips.show({
							title: '优惠卷核销失败',
							type: 'error',
							duration: '2300'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.search-display-area{
		padding: 10rpx 0;
	}
	.search{
		height: 30px;
		line-height: 30px;
		margin: 0 20rpx;
		background-color: #f6f6f6;
		border-radius: 50px;
	}
	.center{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.scan-display-area{
		display: inline-block;
		padding: 20rpx 40rpx;
		background: linear-gradient(
		-180deg, rgb(32, 230, 223) 0%, rgb(0, 201, 219) 72%);
		color: #ffffff;
		text-align: center;
		border-radius: 50%;
	}
	.record{
		color: rgb(0, 201, 219);
	}
	.text-center{
		text-align: center;
	}
</style>
